<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/Chats.css" type="text/css"/>
    <link rel="stylesheet" href="bootstrap-3/bootstrap-3.3.7-dist/css/bootstrap.css"/>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css" type="text/css"/>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css" type="text/css"/>
    <link rel="stylesheet" href="Font-Awesome-3/Font-Awesome-3.2.1/css/font-awesome.css" type="text/css"/>
    <link rel="stylesheet" href="Font-Awesome-3/Font-Awesome-3.2.1/css/font-awesome.min.css" type="text/css"/>
    <title>Chats</title>
</head>
<body>
<!-- 开始头部 -->
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header1">

            <a class="navbar-brand" href="#">
                <i class="glyphicon glyphicon-heart"></i>
                <span class="hidden-phone hidden-xs">Flatty</span>
            </a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active">
                    <a class="glyphicon glyphicon-menu-hamburger" href="#">
                        <!--<i class="icon-reorder"></i>-->
                    </a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <form class="navbar-form navbar-left">
                        <div class="form-group">
                            <button class="glyphicon glyphicon-search" name="button" type="submit"></button>
                            <input type="text" class="form-control" value="Search...">
                        </div>
                    </form>
                </li>
                <li class="item-bc">
                    <a class="glyphicon glyphicon-adjust dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="#"></a>
                    <ul class="dropdown-menu">
                        <li class="item-color">Body color</li>
                        <li><a href="#">
                            Light
                            <small>(default)</small>
                        </a></li>
                        <li><a href="#">
                            Dark
                        </a></li>
                        <li><a href="#">
                            Dark blue
                        </a></li>
                        <li role="separator" class="divider"></li>
                        <li class="item-color">Contrast color</li>
                        <li><a href="#">
                            <i class="glyphicon glyphicon-adjust"></i>
                            Red
                            <small>(default)</small>
                        </a></li>
                        <li><a href="#">
                            <i class="glyphicon glyphicon-adjust"></i>
                            Blue
                        </a></li>
                        <li><a href="#">
                            <i class="glyphicon glyphicon-adjust"></i>
                            Orange
                        </a></li>
                        <li><a href="#">
                            <i class="glyphicon glyphicon-adjust"></i>
                            Purple
                        </a></li>
                        <li><a href="#">
                            <i class="glyphicon glyphicon-adjust"></i>
                            Green
                        </a></li>
                        <li><a href="#">
                            <i class="glyphicon glyphicon-adjust"></i>
                            Muted
                        </a></li>
                        <li><a href="#">
                            <i class="glyphicon glyphicon-adjust"></i>
                            Facebook
                        </a></li>
                        <li><a href="#">
                            <i class="glyphicon glyphicon-adjust"></i>
                            Dark
                        </a></li>
                        <li><a href="#">
                            <i class="glyphicon glyphicon-adjust"></i>
                            Pink
                        </a></li>
                        <li><a href="#">
                            <i class="glyphicon glyphicon-adjust"></i>
                            Grass green
                        </a></li>
                        <li><a href="#">
                            <i class="glyphicon glyphicon-adjust"></i>
                            Sea blue
                        </a></li>
                        <li><a href="#">
                            <i class="glyphicon glyphicon-adjust"></i>
                            Banana
                        </a></li>
                        <li><a href="#">
                            <i class="glyphicon glyphicon-adjust"></i>
                            Dark orange
                        </a></li>
                        <li><a href="#">
                            <i class="glyphicon glyphicon-adjust"></i>
                            Brown
                        </a></li>
                    </ul>

                </li>
                <li class="item-bc1"><a href="#"><i class="fa fa-feed"></i><span class="badge">5</span></a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><img src="img/avatar.jpg">  Mila Kunis <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">
                            <i class="glyphicon glyphicon-user"></i>
                            Profile
                        </a></li>
                        <li><a href="#">
                            Settings
                        </a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">
                            Sign out
                        </a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>
<!-- 结束头部 -->
<div class="content">
    <!-- 开始主列表 -->  
    <div class="content-left">
        <ul class="left-list">
            <li class="list-item">
                <a href="#">
                    <i class="icon-dashboard"></i>
                    <span class="list-item-font">Dashboard</span>
                </a>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-edit"></i>
                    <span class="list-item-font">Forms</span>
                    <i class="icon-angle-down angle-down"></i>
                </a>
                <ul class="left-list-little">
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span>Form styles and features</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span>Form components</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span>Validations</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span>Wizard</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-tint"></i>
                    <span class="list-item-font">UI Elements & Widgets</span>
                    <i class="icon-angle-down angle-down"></i>
                </a>
                <ul class="left-list-little">
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span>UI Elements</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span>Widgets</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-star"></i>
                    <span class="list-item-font">Buttons & Icons</span>
                </a>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-cogs"></i>
                    <span class="list-item-font">Components</span>
                    <i class="icon-angle-down angle-down"></i>
                </a>
                <ul class="left-list-little">
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-bar-chart"></i>
                            <span>Charts</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-envelope"></i>
                            <span>Address book</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-comments"></i>
                            <span>Chats</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-pencil"></i>
                            <span>In-place editing</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-list-ul"></i>
                            <span>File trees</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-file"></i>
                            <span>Fileupload</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-list-alt"></i>
                            <span>Todo list</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-paste"></i>
                            <span>WYSIWYG</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-table"></i>
                    <span class="list-item-font">Tables</span>
                </a>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-th"></i>
                    <span class="list-item-font">Grid</span>
                </a>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-font"></i>
                    <span class="list-item-font">Typography</span>
                </a>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-calendar"></i>
                    <span class="list-item-font">Calendar</span>
                </a>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-book"></i>
                    <span class="list-item-font">Example pages</span>
                    <i class="icon-angle-down angle-down"></i>
                </a>
                <ul class="left-list-little">
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-money"></i>
                            <span>Invoice</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-picture"></i>
                            <span>Gallery</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-time"></i>
                            <span>Timeline</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-table"></i>
                            <span>Pricing tables</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-user"></i>
                            <span>User profile</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-question-sign"></i>
                            <span>404 Error</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-cogs"></i>
                            <span>500 Error</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-signin"></i>
                            <span>Sign in</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-bullhorn"></i>
                            <span>FAQ</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-inbox"></i>
                            <span>Orders</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-search"></i>
                            <span>Search results</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-circle-blank"></i>
                            <span>Blank page</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-cog"></i>
                    <span class="list-item-font">Layouts</span>
                    <i class="icon-angle-down angle-down"></i>
                </a>
                <ul class="left-list-little">
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span>Closed navigation</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span>Fixed header</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span>Fixed navigation</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span>Fixed navigation & header</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-mail-reply"></i>
                    <span class="list-item-font">Email templates</span>
                </a>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-folder-open-alt"></i>
                    <span class="list-item-font">Four level dropdown</span>
                    <i class="icon-angle-down angle-down"></i>
                </a>
                <ul class="left-list-little">
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span class="list-item-font">Second level</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="list-item"></li>
        </ul>
    </div>
    <div class="content-right">
        <div class="header">
            <div>
                <i class="fa fa-comments fa-2x" aria-hidden="true"></i> &nbsp;<span>Chats</span>
            </div>
            <div>
                <a href="index.html"><i class="icon-bar-chart"></i></a> <span> > Components > </span><span>Chats</span>
            </div>
        </div>
        <div class="chats-containers">
            <div class="alert alert-warning alert-dismissible" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <span>Chats can be placed in various containers</span>
            </div>
            <div class="scroll">
                <ul class="unstyled ul-border list-hover list-striped">
                    <li class="message">
                        <div class="avatar">
                            <img alt="Avatar" height="23" src="img/avatar.jpg" width="23">
                        </div>
                        <div class="name-and-time">
                            <div class="name pull-left">
                                <small>
                                    <a href="#" class="text-contrast">Keith</a>
                                </small>
                            </div>
                            <div class="time pull-right">
                                <small class="date pull-right muted">
                                    <span class="timeago fade has-tooltip in" title="May 30, 2013 - 21:04">5 years ago</span>
                                    <i class="icon-time"></i>
                                </small>
                            </div>
                        </div>
                        <div class="body">
                            Ut perferendis et voluptas voluptatem ut amet impedit velit sit.
                        </div>
                    </li>
                    <li class="message">
                        <div class="avatar">
                            <img alt="Avatar" height="23" src="img/avatar.jpg" width="23">
                        </div>
                        <div class="name-and-time">
                            <div class="name pull-left">
                                <small>
                                    <a href="#" class="text-contrast">Humberto</a>
                                </small>
                            </div>
                            <div class="time pull-right">
                                <small class="date pull-right muted">
                                    <span class="timeago fade has-tooltip in" title="May 30, 2013 - 21:03">5 years ago</span>
                                    <i class="icon-time"></i>
                                </small>
                            </div>
                        </div>
                        <div class="body">
                            Fugit deleniti impedit eaque aut beatae blanditiis porro voluptatibus ad molestiae.
                        </div>
                    </li>
                    <li class="message">
                        <div class="avatar">
                            <img alt="Avatar" height="23" src="img/avatar.jpg" width="23">
                        </div>
                        <div class="name-and-time">
                            <div class="name pull-left">
                                <small>
                                    <a href="#" class="text-contrast">Humberto</a>
                                </small>
                            </div>
                            <div class="time pull-right">
                                <small class="date pull-right muted">
                                    <span class="timeago fade has-tooltip in" title="May 30, 2013 - 21:02">5 years ago</span>
                                    <i class="icon-time"></i>
                                </small>
                            </div>
                        </div>
                        <div class="body">
                            Ullam dolorem pariatur amet inventore porro error.
                        </div>
                    </li>
                    <li class="message">
                        <div class="avatar">
                            <img alt="Avatar" height="23" src="img/avatar.jpg" width="23">
                        </div>
                        <div class="name-and-time">
                            <div class="name pull-left">
                                <small>
                                    <a href="#" class="text-contrast">Keith</a>
                                </small>
                            </div>
                            <div class="time pull-right">
                                <small class="date pull-right muted">
                                    <span class="timeago fade has-tooltip in" title="May 30, 2013 - 21:01">5 years ago</span>
                                    <i class="icon-time"></i>
                                </small>
                            </div>
                        </div>
                        <div class="body">
                            Non alias et pariatur accusamus ut aut.
                        </div>
                    </li>
                    <li class="message">
                        <div class="avatar">
                            <img alt="Avatar" height="23" src="img/avatar.jpg" width="23">
                        </div>
                        <div class="name-and-time">
                            <div class="name pull-left">
                                <small>
                                    <a href="#" class="text-contrast">Humberto</a>
                                </small>
                            </div>
                            <div class="time pull-right">
                                <small class="date pull-right muted">
                                    <span class="timeago fade has-tooltip in" title="May 30, 2013 - 21:00">5 years ago</span>
                                    <i class="icon-time"></i>
                                </small>
                            </div>
                        </div>
                        <div class="body">
                            Excepturi ratione neque velit maxime rerum mollitia libero ut et iusto sed ad.
                        </div>
                    </li>
                    <li class="message">
                        <div class="avatar">
                            <img alt="Avatar" height="23" src="img/avatar.jpg" width="23">
                        </div>
                        <div class="name-and-time">
                            <div class="name pull-left">
                                <small>
                                    <a href="#" class="text-contrast">Humberto</a>
                                </small>
                            </div>
                            <div class="time pull-right">
                                <small class="date pull-right muted">
                                    <span class="timeago fade has-tooltip in" title="May 30, 2013 - 20:59">5 years ago</span>
                                    <i class="icon-time"></i>
                                </small>
                            </div>
                        </div>
                        <div class="body">
                            Saepe fugiat dolor necessitatibus sit non velit quia magnam et sapiente quidem libero.
                        </div>
                    </li>
                    <li class="message">
                        <div class="avatar">
                            <img alt="Avatar" height="23" src="img/avatar.jpg" width="23">
                        </div>
                        <div class="name-and-time">
                            <div class="name pull-left">
                                <small>
                                    <a href="#" class="text-contrast">Humberto</a>
                                </small>
                            </div>
                            <div class="time pull-right">
                                <small class="date pull-right muted">
                                    <span class="timeago fade has-tooltip in" title="May 30, 2013 - 20:58">5 years ago</span>
                                    <i class="icon-time"></i>
                                </small>
                            </div>
                        </div>
                        <div class="body">
                            Voluptatibus optio sunt sed et.
                        </div>
                    </li>
                    <li class="message">
                        <div class="avatar">
                            <img alt="Avatar" height="23" src="img/avatar.jpg" width="23">
                        </div>
                        <div class="name-and-time">
                            <div class="name pull-left">
                                <small>
                                    <a href="#" class="text-contrast">Keith</a>
                                </small>
                            </div>
                            <div class="time pull-right">
                                <small class="date pull-right muted">
                                    <span class="timeago fade has-tooltip in" title="May 30, 2013 - 20:57">5 years ago</span>
                                    <i class="icon-time"></i>
                                </small>
                            </div>
                        </div>
                        <div class="body">
                            Sunt aut.
                        </div>
                    </li>
                    <li class="message">
                        <div class="avatar">
                            <img alt="Avatar" height="23" src="img/avatar.jpg" width="23">
                        </div>
                        <div class="name-and-time">
                            <div class="name pull-left">
                                <small>
                                    <a href="#" class="text-contrast">Humberto</a>
                                </small>
                            </div>
                            <div class="time pull-right">
                                <small class="date pull-right muted">
                                    <span class="timeago fade has-tooltip in">5 years ago</span>
                                    <i class="icon-time"></i>
                                </small>
                            </div>
                        </div>
                        <div class="body">
                            Animi totam repellendus debitis voluptates iste dolor consequatur.
                        </div>
                    </li>
                    <li class="message">
                        <div class="avatar">
                            <img alt="Avatar" height="23" src="img/avatar.jpg" width="23">
                        </div>
                        <div class="name-and-time">
                            <div class="name pull-left">
                                <small>
                                    <a href="#" class="text-contrast">Humberto</a>
                                </small>
                            </div>
                            <div class="time pull-right">
                                <small class="date pull-right muted">
                                    <span class="timeago fade has-tooltip in">5 years ago</span>
                                    <i class="icon-time"></i>
                                </small>
                            </div>
                        </div>
                        <div class="body">
                            Ut nemo accusantium sit velit qui.
                        </div>
                    </li>
                </ul>
                <div class="input-group">
                    <input type="text" class="form-control" aria-label="..." placeholder="Type your new todo here...">
                    <div class="input-group-btn">
                        <button class="btn btn-success"><i class="icon-plus"></i></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
<script type="text/javascript" src="jq/jquery-1.11.0.min.js"></script>
<script src="bootstrap-3/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/echarts.simple.min.js"></script>
<script>
    $(function () {
        $('.list-item').on('click',function () {
            $(this).children('ul').toggle(300);
        });
        $('.item').on('mouseover',function () {
            $(this).find('.icon-pencil').css('display','block');
            $(this).find('.icon-remove').css('display','block');
        }).on('mouseout',function () {
            $(this).find('.icon-pencil').css('display','none');
            $(this).find('.icon-remove').css('display','none');
        });
        $('.comments>li').on('mouseover',function () {
            $(this).find('.actions').css('display','block');
        }).on('mouseout',function () {
            $(this).find('.actions').css('display','none');
        });
    });
</script>
</body>
</html>